<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1" />
  <title>Document</title>
  <script src="../Library/jquery/jquery-3.6.0.js"></script>
  <style>
    .es-richText {
      position: relative;
      box-sizing: border-box;
      border-radius: 3px;
      border: 1px solid #aaa;
      box-shadow: 0 0 6px #00000030;
      height: fit-content;
    }

    .es-richText iframe {
      border: none;
    }

    .es-richText textarea {
      border: none;
      resize: none;
      width: 100%;
      height: 100%;
      background: transparent;
      box-sizing: border-box;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre-wrap;
    }

    .es-richText textarea:focus {
      outline: none;
    }

    .es-richText .toolbar {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      border-bottom: 1px solid #aaa;
      padding: 3px 5px;
    }

    .es-richText .toolbar div {
      padding: 4px 8px;
      margin: 3px;
      border-radius: 3px;
      transition: all .3s;
      cursor: pointer;
      user-select: none;
    }

    .es-richText .toolbar div:hover {
      background: #00000024;
    }

    .es-richText #HtmlEdit {
      word-wrap: break-word;
      word-break: break-all;
    }

    .trueView {
      height: 667px;
      width: 375px;
      flex-shrink: 0;
      margin-right: 50px;
      overflow: hidden;
      box-sizing: border-box;
      border-radius: 3px;
      border: 1px solid #aaa;
      box-shadow: 0 0 6px #00000030;
      overflow-y: scroll;
      word-wrap: break-word;
      word-break: break-all;
    }

    .trueView::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    .trueView:hover::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
      background: #ddd;
    }

    .trueView:hover::-webkit-scrollbar-track-piece {
      /* 滚动条里面轨道 -piece 鼠标放上去才显示*/
      /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); */
      border-radius: 8px;
      background: #f4f4f4;
    }
  </style>
</head>

<body>

  <div style="display: flex;">
    <div id="box" class="trueView"></div>
    <div class="es-richText">
      <div class="toolbar" id="butGroup">
        <div class="toHtml_btn" onclick="esEditor.toHtml()" style="font-size:12px;">&lt;/&gt;</div>
        <div class="toView_btn" onclick="esEditor.toView()" style="font-size:12px;display:none;">TXT</div>
        <div class="htmlHide" onclick="esEditor.undo()">撤销</div>
        <div class="htmlHide" onclick="esEditor.redo()">恢复</div>
        <div class="htmlHide" onclick="esEditor.insertEMSP()">EMSP</div>
        <div class="htmlHide" onclick="esEditor.indent()">缩进</div>
        <div class="htmlHide" onclick="esEditor.bold()">加粗</div>
        <div class="htmlHide" onclick="esEditor.italic()">倾斜</div>
        <div class="htmlHide" onclick="esEditor.underline()">下划线</div>
        <div class="htmlHide" onclick="esEditor.strikeThrough()">删除线</div>
        <div class="htmlHide" onclick="esEditor.h1()">H1</div>
        <div class="htmlHide" onclick="esEditor.h2()">H2</div>
        <div class="htmlHide" onclick="esEditor.h3()">H3</div>
        <div class="htmlHide" onclick="esEditor.foreColor()">字体颜色</div>
        <div class="htmlHide" onclick="esEditor.hiliteColor()">字体背景</div>
        <div class="htmlHide" onclick="esEditor.insertOrderedList()">有序</div>
        <div class="htmlHide" onclick="esEditor.insertUnorderedList()">无序</div>
        <div class="htmlHide" onclick="esEditor.save()">提交</div>
        <div class="htmlHide" onclick="esEditor.format()">format</div>
        <div class="htmlHide" onclick="esEditor.lineHeight()">行高</div>
      </div>
      <div style="width:100%; height:586px; box-sizing: border-box;">
        <iframe id="HtmlEdit" style="width:100%;height:100%;"></iframe>
        <textarea id="HtmlView" style="width:100%;height:100%; display:none;"></textarea>
      </div>
    </div>
  </div>

  <script>
    $("#HtmlEdit").ready(function () {
      esEditor.EditorInitSetting();
    })

    var esEditor = {
      isFormat: false,
      editor: document.getElementById("HtmlEdit").contentWindow, //获取iframe Window 对象
      doc: document.getElementById("HtmlEdit").contentDocument, //获取iframe documen 对象
      butGroup: document.getElementById('butGroup'),
      box: document.getElementById('box'),
      iframeJqDOC: '',
      EditorInitSetting: function () {
        this.editor.document.designMode = 'On'; //打开设计模式
        this.editor.document.contentEditable = true; // 设置元素为可编辑
        var scr = HTMLDecode("&lt;script src='../Library/jquery/jquery-3.6.0.js'&gt;&lt;/script&gt;");
        this.doc.getElementsByTagName("head")[0].innerHTML += scr;
        this.doc.write(scr);
        var js = HTMLDecode(`&lt;script&gt;
        function hide(ele) {
          window.parent.esEditor.autoFormat($(document))
        }
        &lt;/script&gt;`)
        this.doc.write("<div id='space' style='position:fixed;top:0;left:0;right:0;bottom:0;' onclick='hide($(this))'></div>");
        this.doc.write(js);
        // 对head添加方法
        this.doc.getElementsByTagName("head")[0].innerHTML += HTMLDecode(`&lt;style&gt;
          p {
            word-wrap: break-word;
            word-break: break-all;
          }
        &lt;/style&gt;`)
        this.doc.getElementsByTagName("head")[0].innerHTML += HTMLDecode(`&lt;script&gt;
          $("p").click(function () {
            console.log($("li").index(this))
          })
        &lt;/script&gt;`)
      },
      eventIndex: "",
      undo: function () {
        this.editor.document.execCommand('undo', false, null); // 撤销
      },
      redo: function () {
        this.editor.document.execCommand('redo', false, null); // 恢复
      },
      indent: function () {
        this.editor.document.execCommand("Indent"); // 增加选中文本的缩进。
      },
      // 加粗
      bold: function () {
        this.editor.document.execCommand('bold', false, null)
      },
      // 斜体
      italic: function () {
        this.editor.document.execCommand('italic', false, null)
      },
      // 下划线
      underline: function () {
        this.editor.document.execCommand('underline', false, null)
      },
      // 删除线
      strikeThrough: function () {
        this.editor.document.execCommand('strikeThrough', false, null)
      },
      // H1
      h1: function () {
        this.editor.document.execCommand('fontSize', false, 7)
      },
      // H2
      h2: function () {
        this.editor.document.execCommand('fontSize', false, 6)
      },
      // H3
      h3: function () {
        this.editor.document.execCommand('fontSize', false, 5)
      },
      // 字体颜色
      foreColor: function () {
        this.editor.document.execCommand('foreColor', false, 'red')
      },
      // 字体背景
      hiliteColor: function () {
        this.editor.document.execCommand('hiliteColor', false, 'yellow')
      },
      // 有序列表
      insertOrderedList: function () {
        this.editor.document.execCommand('insertOrderedList', false, null)
      },
      // 无序列表
      insertUnorderedList: function () {
        this.editor.document.execCommand('insertUnorderedList', false, null)
      },
      // 格式序列化
      format: function () {
        this.editor.document.execCommand('formatblock', false, 'p');
      },
      lineHeight: function () {
        console.log(this.iframeJqDOC)
        this.iframeJqDOC.find("p").css("lineHeight", 2)
      },
      insertEMSP: function () {
        this.editor.document.execCommand('insertText', false, HTMLDecode('&emsp;&emsp;'));
      },
      eventHandler: function (e) {

      },
      // 格式序列化
      autoFormat: function (ele) {
        console.log(ele.find("body"))
        ele.find("body").find("script,#space").remove();
        this.iframeJqDOC = ele;
        ele.bind("DOMNodeInserted", function (e) {
          setTimeout(function () {
            // ele.find("p").css({
            //   "text-indent": "2em"
            // })
          })
        })
        setTimeout(function () {
          this.editor.document.execCommand('formatblock', false, 'p');
        }.bind(this))
      },
      // 提交
      save: function () {
        console.log(this.doc.body.innerHTML)
        this.box.innerHTML = this.doc.body.innerHTML
      },
      toHtml: function () {
        // 切换为源码视图
        $("#HtmlEdit").hide();
        $("#HtmlView").fadeIn(300);
        $("#HtmlView").val(this.doc.body.innerHTML); // 编辑继承
        $(".toHtml_btn").hide();
        $(".toView_btn").fadeIn(300);
        $(".htmlHide").css({
          "opacity": 0,
          "cursor": "default",
          "pointer-events": "none"
        });
      },
      toView: function () {
        // 切换为效果视图
        $("#HtmlView").hide();
        $("#HtmlEdit").fadeIn(300);
        this.doc.body.innerHTML = $("#HtmlView").val()
        $(".toView_btn").hide();
        $(".toHtml_btn").fadeIn(300);
        $(".htmlHide").css({
          "opacity": 1,
          "cursor": "pointer",
          "pointer-events": "auto"
        });
      }
    }

    function HTMLEncode(html) {
      var temp = document.createElement("div");
      (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
      var output = temp.innerHTML;
      temp = null;
      return output;
    }

    function HTMLDecode(text) {
      var temp = document.createElement("div");
      temp.innerHTML = text;
      var output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    }
  </script>
</body>

</html>